<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
    <title>Student Website</title>
</head>

<body>
<div class="navbar">
    <span class="title"><a href="/" style="text-decoration: none;color: black">Back To Main Page</a></span>
</div>

<div class="card">
    <a onclick="window.history.go(-1)">Back</a>
    <h2>
        Create a new Course
    </h2>
    <div class="input-container">
        <div class="input-group">
            <p>Name</p>
            <input type="text" name="name" id="coures_name" class="input">
        </div>
        <div class="input-group">
            <p>Class name</p>
            <input type="text" name="class_name" id="class_name" class="input">
        </div>
        <div class="input-group">
            <p>Teacher</p>
            <input type="text" name="teacher" id="teacher" class="input">
        </div>
        <div class="input-group">
            <p>Course description</p>
            <textarea type="text" name="descriptive" id="descriptive" class="input"></textarea>
        </div>
        <div class="input-group">
            <p>Begin time</p>
            <input type="datetime-local" name="begintime" id="begintime" class="input">
        </div>
        <div class="input-group">
            <p>Over time</p>
            <input type="datetime-local" name="overtime" id="overtime" class="input">
        </div>
    </div>
    <br>
    <div style="text-align: center;">
        <button onclick="newCoures()" class="button" style="margin-top: 15px;">Create</button>
    </div>
</div>
</body>

<script>
    const urlParams = new URLSearchParams(window.location.search);
    const _classname = urlParams.get('classname');

    document.getElementById("class_name").value = _classname;
</script>

<script>
    function newCoures() {
        const couresname = document.getElementById("coures_name").value;
        const classname = document.getElementById("class_name").value;
        const teacher = document.getElementById("teacher").value;
        const descriptive = document.getElementById("descriptive").value;
        const begintime = document.getElementById("begintime").value;
        const overtime = document.getElementById("overtime").value;

        fetch('/api/course', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                coursename: couresname,
                classname: classname,
                teacher: teacher,
                descriptive: descriptive,
                begintime: begintime,
                overtime: overtime
            })
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Failed to post class');
                }
                alert("Creating Course Success!");
                return response.json();
                window.location.reload();
            })
            .then(data => {
                window.location.href = `/class?classname=${classname}`;
            })
            .catch(error => {
                console.error('Error:', error);
                alert("can't create a course!")
            });
    }
</script>
<style>
    .input-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .input-group {
        flex: 0 0 45%; /* 45% 是输入框的宽度，你可以根据你的需要调整这个值 */
        margin-bottom: 10px; /* 这是输入框之间的间距，你也可以根据你的需要调整这个值 */
    }

</style>
</html>